<template>
  <div class='alarm-dialog-wrapper flex'>
    <div class="tabs-wrapper">
      <el-button 
        v-for="item in tabsList" 
        type="primary" 
        :key="item.type" 
        :class="currentComponent === item.component ? 'btn_group_active' : 'btn_group'" 
        @click="clickTabs(item.component)">
        {{ item.label }}
      </el-button>
    </div>
      <transition name="tab" mode="out-in">
        <keep-alive>
          <component :is="currentComponent" v-model="details" @repace="emitRepace" :key="Math.random()"/>
        </keep-alive>
      </transition>
  </div>
</template>
<script>
import AlarmDetails from './AlarmDetails';
import RealTimeVideo from './RealTimeVideo';
import OperationRecord from './OperationRecord';
import AlarmImages from './AlarmImages';
export default {
  props: {
    details: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      tabsList:[
        {
          label: '报警详情',
          component: 'AlarmDetails'
        },
        {
          label: '实时视频',
          component: 'RealTimeVideo'
        },
        {
          label: '操作记录',
          component: 'OperationRecord'
        },
        // {
        //   label: '报警图像',
        //   component: 'AlarmImages'
        // }
      ],
      currentComponent: 'AlarmDetails',
    };
  },
  watch: {
    details: {
      handler() {
        this.currentComponent = 'AlarmDetails'
      },
      deep: true
    }
  },
  methods: {
    clickTabs(comp) {
      this.currentComponent = comp
    },
    emitRepace() {
      this.$emit('repace')
    }
  },
  components: {
    AlarmDetails,
    RealTimeVideo,
    OperationRecord,
    AlarmImages
  },
}
</script>

<style lang='less' scoped>
.alarm-dialog-wrapper {
  flex-direction: column;
  .tabs-wrapper {
    display: flex;
    margin-bottom: 15px;
  } 
}
 
</style>